<template>
  <div v-if="value">
    <Card>
      <p slot="title">
        <Breadcrumb separator=">">
          <Breadcrumb-item href="/">个人中心</Breadcrumb-item>
          <Breadcrumb-item href=""><span @click="bindSelect">安全中心</span>
          </Breadcrumb-item>
          <Breadcrumb-item>修改密码</Breadcrumb-item>
        </Breadcrumb>
      </p>
      <div style="width:60%; margin: 3rem auto">
        <Steps :current="step">
          <Step title="修改密码" content=""></Step>
          <Step title="修改成功" content=""></Step>
        </Steps>
      </div>
      <Form class="baseform" :model="formItem" :rules="ruleValidate" :label-width="140">
        <FormItem label="原始密码" prop="oldpwd">
          <Input type='password' v-model="formItem.oldpwd" placeholder="请输入原始登录密码"></Input>
        </FormItem>
        <FormItem label="新密码" prop="newpwd">
          <Input type='password' v-model="formItem.newpwd" placeholder="请输入新密码"></Input>
          <span>当前手机号</span><span>{{this.$store.state.session.user.phoneNumber}}</span>
        </FormItem>
        <FormItem label="验证码" prop="code">
          <Input style="width:50%;display:inline-block;" v-model="formItem.code" placeholder="请输入验证码" ></Input>
          <Button v-show="!(showtime)" style="width:48%;display:inline-block;" type="success" value="" @click="getCode">获取验证码 </Button>
          <span v-show="showtime" type="success" value="" style="display: inline-block;color: #fff;padding:0 40px;background:#19BE6B;border-radius:4px;border-color:#19be6b;vertical-align: middle;text-align: center;font-weight: 400;font-size: 16px;height: 32px;">{{ count }}</span>
        </FormItem>
        <FormItem>
          <Button style="width:100%" type="success" @click="save" value="">立即修改 </Button>
        </FormItem>
      </Form>
    </Card>

  </div>
</template>

<script>
// @ is an alias to /src

import { Component, Vue, Prop, Emit } from 'vue-property-decorator'
import ajax from '../lib/ajax'

@Component
export default class PasswordReset extends Vue {
  @Prop({ type: Boolean, default: false }) value
  get userInfo() {
    return this.$store.getters['session/user']
  }

  showtime = false
  step = 0
  count = 60
  formItem = {
    oldpwd: '',
    newpwd: '',
    code: ''
  }

  @Emit('bindSelect')
  bindSelect() {
    return '2'
  }

  getCode() {
    const TIME_COUNT = 60 // 3.设置时间为60s
    if (!this.timer) {
      this.count = TIME_COUNT
      this.showtime = true
      this.getPhoneCode() // 5.调用后端获取验证码接口的函数
      let timer = setInterval(() => {
        if (this.count > 0 && this.count <= TIME_COUNT) { // 6.设置每秒钟递减
          this.count--
        } else { // 7.递减至0时,显示获取验证码按钮,隐藏倒计时模块,清除定时器this.timer,并将其置为null
          this.showtime = false
          clearInterval(timer)
          timer = null
        }
      }, 1000)
    }
  }

  getPhoneCode() {
    ajax.post('getChangePwdSmsCode').then(result => {
      if (result.data.code === 200) {
        this.$Message.success('验证码发送成功')
      }
    })
  }

  save() {
    this.$Modal.confirm({
      title: '确认',
      content: '确认要修改密码吗',
      onOk: () => {
        ajax.post('changePwd', this.formItem).then(result => {
          if (result.data.code === 200) {
            this.$Message.success('恭喜你修改成功')
            this.step = 1
          }
        })
      },
      onCancel: () => {
        this.$Message.info('取消成功')
      }
    })
  }

  ruleValidate = {
    oldpwd: [
      { required: true, message: '原始密码不能为空', trigger: 'blur' }
    ],
    newpwd: [
      { required: true, message: '新密码不能为空', trigger: 'blur' }
    ],
    code: [
      { required: true, message: '验证码不能为空', trigger: 'blur' }
    ]
  }
}
</script>
<style scoped>
.baseform {
  font-size: 1.2rem;
  width: 70%;
  margin: 0 auto;
}
.user_info_title {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 1rem;
}
.user_info_item {
  font-size: 1.4rem;
  padding: 1rem 0;
}
.user_info_item_detail {
  color: #999;
  padding-right: 1rem;
}
.des {
  margin: 0.5rem 0;
  font-size: 1.2rem;
  color: #999;
}
</style>
